import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Statistic, Row, Col, Button, Collapse, Badge } from 'antd';
import PageHeaderContent from '@/components/PageHeaderContent';
import { connect } from 'dva';
import G2Maps from './Charts/G2Maps';
import G2LineXa from './Charts/G2LineXa';
import G2LineX from './Charts/G2LineX';
import { SettingOutlined } from '@ant-design/icons';
import { getCurrent } from '@/services/user';
import IconFont from '@/components/Iconfont';

const { Panel } = Collapse;

class Welcome extends React.Component {
  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    this.setState({ loading: true });
    let props: API.PageProps = this.props;
    const resp = await getCurrent();
    let currentUser = resp.result.user;
    props.dispatch({
      type: "Abp/setCurrent",
      payload: currentUser,
    })
  }
  onFinish = () => {
    console.log('finished!');
  }
  genExtra = (event: any) => {
    console.log(event)
  }
  render() {
    return (
      <PageContainer content={<PageHeaderContent />}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card hoverable={true}>
                  <Statistic
                    title="产能效率"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: '#3f8600' }}
                    prefix={<IconFont type="icon-positive_dynamic" />}
                    suffix="%"
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card hoverable={true}>
                  <Statistic
                    title="销售业绩"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: '#cf1322' }}
                    prefix={<IconFont type="icon-bullish" />}
                    suffix="%"
                  />
                </Card>
              </Col>
              <Col span={24}>
                <Collapse
                  defaultActiveKey={['1']}
                  expandIconPosition='right'
                >
                  <Panel header={<span><Badge status='processing' text='服务器汇总' /></span>} key="1" extra={<SettingOutlined onClick={(e) => this.genExtra(e)} />}>

                    <G2LineXa />
                  </Panel>
                  <Panel header={<span><Badge status='error' text='服务器2 — (无锡五洲国际)' /> </span>} key="2" extra={<SettingOutlined onClick={() => this.genExtra} />}>

                    <Row gutter={16}>
                      <Col span={24}>
                        <G2LineX />
                      </Col>
                    </Row>

                  </Panel>
                </Collapse>
              </Col>
            </Row>

          </Col>
          <Col span={12}>
            <Card hoverable extra={<Button type="primary" style={{ marginTop: 16 }}> 最新数据 </Button>}>
              <Row gutter={[16,16]}>
                <Col span={12}>
                  <Statistic title="库存总量" value={112893} />
                </Col>
                <Col span={12}>
                  <Statistic title="出货总额 (CNY)" value={112893} precision={2} />                  
                </Col>
                <Col span={24}><G2Maps /></Col>
              </Row>
            </Card>
          </Col>
        </Row>

      </PageContainer>
    )
  }
}

export default connect(({ Abp }: API.IConnectState) => ({
  Abp,
}))(Welcome);